<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:include="front/common/cssjs :: main"></div>

<div th:include="front/common/header :: main"></div>

<div class="container">

    <div class="mt-3">
        <h4 class="text-center">购物车清单</h4>
        <div class="mt-3 mb-3">
            购物车id：<span id="porderId" th:text="${Porder.id}"></span>, &nbsp;&nbsp;&nbsp;&nbsp;
            时间：<span th:text="${#dates.format(Porder.date,'yyyy-MM-dd HH:mm:ss')}"></span>,&nbsp;&nbsp;&nbsp;&nbsp;
            状态码：<span th:text="${Porder.status}"></span>,&nbsp;&nbsp;&nbsp;&nbsp;
            总金额：<span id="total"></span>
        </div>

        <table class="table table-bordered">
            <tr><th>ID</th><th>商品id</th><th>商品名</th><th>数量</th><th>价格</th></tr>
            <tbody id="detail">
            <tr th:each="one:${DetailList}">
                <td th:text="${one.id}"></td>
                <td th:text="${one.productId}"></td>
                <td th:text="${one.product.name}"></td>
                <td>
                    <button th:onclick="minus(this, [[${one.productId}]])">-</button>
                    <input class="quantity" type="text" th:value="${one.quantity}" size="1">
                    <button th:onclick="add(this, [[${one.productId}]])">+</button>
                </td>
                <td class="price" th:text="${one.price}"></td>
            </tr>
            </tbody>
        </table>
        <a th:href="'commit?porderId=' + ${Porder.id}" class="btn btn-info">提交</a>
    </div>
</div>

<script>
    function minus(obj ,productId) {
        var father = $(obj).parent();
        var original = parseInt(father.find("input").val());
        if(original>1){
            var target = original - 1;
            changeTo(father, productId, target);
        }
    }
    function add(obj, productId) {
        var father = $(obj).parent();                                  console.log(father);
        var original = parseInt(father.find("input").val());           console.log(original);
        var target = original + 1;                                     console.log(target);
        changeTo(father, productId, target);
    }
    function changeTo(father, productId, target) {
        console.log("目标数量target=" + target);
        var porderId = $("#porderId").text();   //拿到购物车号
        $.ajax({
            url:"changeQuantity",
            data:{
                'porderId': porderId,
                'productId': productId,
                'target': target
            },
            success: function (data) {
                if(data=='ok'){
                    father.find("input").val(target);
                    setTotal();
                }
                else{ alert("修改失败");}
            }
        });

    }
</script>
<script>
    //计算总金额
    function setTotal() {
        var total = 0;
        $("#detail tr").each(  function(){
            var quantity = $(this).find(".quantity").val(); //数量
            var price = $(this).find(".price").text();  //价格
            total = total + quantity * price;
        });
        $("#total").text(total);
    }

    $(function(){
        setTotal();
    })
</script>
</body>
</html>